<md-card>
  <md-card-content>
    <h2 class="example-h2">Slider configuration</h2>

    <section class="example-section">
      <md-input-container class="example-margin">
        <input mdInput type="number" placeholder="Value" [(ngModel)]="value">
      </md-input-container>
      <md-input-container class="example-margin">
        <input mdInput type="number" placeholder="Min value" [(ngModel)]="min">
      </md-input-container>
      <md-input-container class="example-margin">
        <input mdInput type="number" placeholder="Max value" [(ngModel)]="max">
      </md-input-container>
      <md-input-container class="example-margin">
        <input mdInput type="number" placeholder="Step size" [(ngModel)]="step">
      </md-input-container>
    </section>

    <section class="example-section">
      <md-checkbox class="example-margin" [(ngModel)]="showTicks">Show ticks</md-checkbox>
      <md-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
        Auto ticks
      </md-checkbox>
      <md-input-container class="example-margin" *ngIf="showTicks && !autoTicks">
        <input mdInput type="number" placeholder="Tick interval" [(ngModel)]="tickInterval">
      </md-input-container>
    </section>

    <section class="example-section">
      <md-checkbox class="example-margin" [(ngModel)]="thumbLabel">Show thumb label</md-checkbox>
    </section>

    <section class="example-section">
      <md-checkbox class="example-margin" [(ngModel)]="vertical">Vertical</md-checkbox>
      <md-checkbox class="example-margin" [(ngModel)]="invert">Inverted</md-checkbox>
    </section>

    <section class="example-section">
      <md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
    </section>

  </md-card-content>
</md-card>

<md-card class="result">
  <md-card-content>
    <h2 class="example-h2">Result</h2>

    <md-slider
        class="example-margin"
        [disabled]="disabled"
        [invert]="invert"
        [max]="max"
        [min]="min"
        [step]="step"
        [thumb-label]="thumbLabel"
        [tick-interval]="tickInterval"
        [value]="value"
        [vertical]="vertical">
    </md-slider>
  </md-card-content>
</md-card>
